<template>
  <div class="permission-management-view">
    <div class="page-header">
      <div class="header-content">
        <div>
          <h1>权限管理</h1>
          <p class="page-description">管理系统权限，包括菜单、按钮和API权限的配置与管理</p>
        </div>
        <div class="header-actions">
          <el-button 
            type="warning" 
            :icon="Lock" 
            @click="handleTestPermission"
            :disabled="testing"
          >
            {{ testing ? '测试中...' : '测试代码级权限' }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 权限管理标签页 -->
    <el-tabs v-model="activeTab" class="permission-tabs">
      <!-- 权限列表 -->
      <el-tab-pane label="权限列表" name="list">
        <PermissionListTab />
      </el-tab-pane>

      <!-- 权限树 -->
      <el-tab-pane label="权限树" name="tree">
        <PermissionTreeTab />
      </el-tab-pane>

      <!-- 菜单管理 -->
      <el-tab-pane label="菜单管理" name="menu">
        <MenuManagementTab />
      </el-tab-pane>

      <!-- 角色权限关联 -->
      <el-tab-pane label="角色权限" name="role-permission">
        <RolePermissionTab />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'
import PermissionListTab from '../components/PermissionListTab.vue'
import PermissionTreeTab from '../components/PermissionTreeTab.vue'
import MenuManagementTab from '../components/MenuManagementTab.vue'
import RolePermissionTab from '../components/RolePermissionTab.vue'
import { useAuthStore } from '../store/auth'

// 当前激活的标签页
const activeTab = ref('list')

// 权限 Store
const authStore = useAuthStore()

// 测试权限码（可配置）
const TEST_PERMISSION_CODE = 'PERMISSION_TEST_BUTTON'

// 测试状态
const testing = ref(false)

// 检查是否有测试权限
const hasTestPermission = computed(() => {
  return authStore.hasPermission(TEST_PERMISSION_CODE)
})

// 测试权限
const handleTestPermission = async () => {
  testing.value = true
  
  try {
    // 先刷新权限，确保获取最新数据
    authStore.refreshPermissions()
    
    // 等待一下，确保权限已更新
    await new Promise(resolve => setTimeout(resolve, 100))
    
    // 检查权限
    const hasPermission = authStore.hasPermission(TEST_PERMISSION_CODE)
    const allPermissions = authStore.permissions || []
    
    // 显示测试结果
    await ElMessageBox.alert(
      `
        <div style="text-align: left; line-height: 1.8;">
          <p><strong>权限码：</strong>${TEST_PERMISSION_CODE}</p>
          <p><strong>权限检查结果：</strong>
            <span style="color: ${hasPermission ? '#67c23a' : '#f56c6c'}; font-weight: bold;">
              ${hasPermission ? '✓ 有权限' : '✗ 无权限'}
            </span>
          </p>
        </div>
      `,
      '权限测试结果',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        type: hasPermission ? 'success' : 'warning'
      }
    )
  } catch (error) {
    // 用户关闭对话框，不处理
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.permission-management-view {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.page-description {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}

.permission-tabs {
  background: var(--el-bg-color-page);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 0 20px;
  background: var(--el-bg-color-page);
  border-radius: 8px 8px 0 0;
}

:deep(.el-tabs__content) {
  padding: 20px;
}
</style>
